<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="topbar-title">Message</ui:define>

    <ui:define name="content">
        <h:form>
            <div class="ui-g">
                <div class="ui-g-12">
                    <div class="card">
                        <h1>Messages</h1>

                        <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />

                        <p:commandButton value="Info" actionListener="#{messagesView.info}" immediate="true" style="width:100px"/>
                        <p:commandButton value="Warn" actionListener="#{messagesView.warn}" immediate="true" styleClass="yellow-button" style="width:100px"/>
                        <p:commandButton value="Error" actionListener="#{messagesView.error}" immediate="true" styleClass="red-button" style="width:100px"/>
                        <p:commandButton value="Fatal" actionListener="#{messagesView.fatal}" immediate="true" styleClass="black-button" style="width:100px"/>

                        <p:growl id="growl" sticky="true"/>

                        <h:panelGrid id="grid" columns="3" cellpadding="5" style="margin-top:20px">
                            <p:outputLabel for="default" value="Default:" />
                            <p:inputText id="default" required="true" />
                            <p:message for="default" />

                            <p:outputLabel for="txt" value="Text:" />
                            <p:inputText id="txt" required="true" />
                            <p:message for="txt" display="text" />

                            <p:outputLabel for="icon" value="Icon:" />
                            <p:inputText id="icon" required="true" />
                            <p:message for="icon" display="icon" />
                        </h:panelGrid>

                        <p:commandButton id="submitButton" value="Submit" styleClass="GreenButton" update="grid growl" />
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>